<%@page language="java" contentType="text/html; charset=UTF-8" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="html" tagdir="/WEB-INF/tags" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<!DOCTYPE html>
<html>
<html:header title="新增商品模板">

    <link rel="stylesheet" href="${baseUrl}css/public.css" media="all">

    <style type="text/css">
        a{
            color: #01AAED;
            text-decoration: none;
            font-size: 12px;
        }
        a:hover {
            color: #FF5722;
        }

        .layui-table-view{
            margin: 0;
        }

        .layui-table-cell {            overflow: visible !important;        }
        /* 使得下拉框与单元格刚好合适 */
        td .layui-form-select{
            margin-top: -10px;
            margin-left: -15px;
            margin-right: -15px;
        }

    </style>

    <script>
        jQuery(function () {
            fixTableOperatorButton();
            getByType("${baseUrl}",ORDER_TYPE.MB.type, $("[name='no']"));

            $("#cancel").click(function () {
                closeSubIframe();
            });

            $("#save").click(function () {
                $("[lay-filter='save']").click();
            });


            $(".select-goods").click(function () {
                openBigHtmlDialog("选择商品", "${baseUrl}select/selectGoods.action");
            });
        });

        layui.use(['form', 'table'], function () {
            let $ = layui.jquery,
                form = layui.form,
                table = layui.table,
                util = layui.util;

            renderTable();

            // 监听修改update到表格中
            form.on('select(unitSelect)', function (data) {
                changeUnitSelect($(data.elem),data.value, true);
            });

            form.on('submit(save)',function (data) {
                if (layui.table.cache.table.length == 0) {
                    errTip("未选择任何商品");
                    return false;
                }

                if (data.field.name == "") {
                    errTip("模板名称不能为空");
                    return false;
                }

                if (data.field.no == "") {
                    errTip("模板编号不能为空");
                    return false;
                }

                let flag = false;
                $.each(layui.table.cache.table,function (i,d) {
                    if (d.number == 0) {
                        errTip(d.name+"的数量不能为空");
                        flag = true;
                        return false;
                    }
                });
                if (flag){
                    return false;
                }


                //模板
                let goodsTemplateVo = data.field;
                delete goodsTemplateVo.number;
                delete goodsTemplateVo.unitId;
                if (data.field.status == undefined) {
                    goodsTemplateVo.status = 2;
                } else {
                    goodsTemplateVo.status = 1;
                }

                //模板商品
                let goodsTemplateGoodsList = new Array();
                
                $.each(layui.table.cache.table,function (i,d) {
                    let goodsTemplateGoods = {};
                    goodsTemplateGoods.goodsId = d.id;
                    goodsTemplateGoods.unitId = d.unitId;
                    goodsTemplateGoods.number = d.number;
                    goodsTemplateGoodsList.push(goodsTemplateGoods);
                });

                goodsTemplateVo.goodsTemplateGoodsList = goodsTemplateGoodsList;

                console.log(JSON.stringify(goodsTemplateVo));
                tipLoad("模板新增中...");
                post("${baseUrl}marketGoods/goodsTemplate/add.action", goodsTemplateVo, function (res) {
                    closeAll();
                    if (res.code == 1) {
                        refreshMainIframe("${baseUrl}marketGoods/goodsTemplate.action");
                        closeSubIframe();
                    } else {
                        errTip(res.msg);
                    }
                });
                return false;
            });
        });

        function renderTable() {
            layui.table.render({
                id:'table',
                elem: '#table',
                height: 300,
                data:[],
                text: {
                    none: '未选择商品' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
                },
                cols: [[
                    {type:'numbers'},
                    {field: 'name', minWidth: 140, title: '名称/规格',style:"font-size:12px;",templet:function (d) {
                        return genGoodsName(d.name,d.norms);
                    }},
                    {field: 'no', width: 140, title: '商品编号',style:"font-size:12px;"},
                    {width: 110, title: '数量',templet:"#numberBar"},
                    {width: 120, title: '单位',style:"font-size:12px;", templet:function (d) {
                        return genSelectUnit(d.unitId, d.goodsUnitVoList);
                    }},
                    {title: '操作', minWidth: 80, fixed:'right', templet: '#operBar'},
                ]],
                limit: Number.MAX_VALUE,
                done: function(res, curr, count){
                    $(".number").blur(function () {
                        processNumber(genNumber($(this).val()),$(this), true);
                    });

                    $(".numberAdd").click(function () {
                        let $input=$(this).parent().find(".number");
                        processNumber(genNumber($input.val(),1), $input, true);
                    });

                    $(".numberSub").click(function () {
                        let $input=$(this).parent().find(".number");
                        processNumber(genNumber($input.val(),3), $input, true);
                    });
                }
            });

            layui.table.on('tool(table)', function (obj) {
                let data = obj.data;
                if (obj.event === 'delete') {
                    operator_del(obj);
                }
            });
        }

        /**
         * 如果使用商品选择窗口，必须实现此函数，否则取不到已选择的商品数据
         * @param data
         */
        function getSelectGoods(data) {
            console.log("选择商品数据");
            console.log(JSON.stringify(data));
            //处理显示数据
            $.each(data,function (i,d) {
                layui.table.cache.table.push(d);
            });
            reloadGoodsTable();
        }

        /**
         * 供外部调用-根据条码获取商品接口
         * @param data
         */
        function processGoods(data) {
            $(window).focus();
            layui.table.cache.table.push(data);
            reloadGoodsTable();
        }
    </script>

</html:header>

<body>

<div style="width: 100%; margin-bottom: 20px;" >
    <button class="layui-btn select-goods">选择商品</button>
    <html:getGoodsByCode/>

    <div style="float: right;">
        <button id="save" class="layui-btn">保存</button>
        <button class="layui-btn layui-btn-primary" id="cancel">取消</button>
    </div>
</div>
<div class="layuimini-container">
    <div class="layuimini-main" style="padding-top: 20px;">

        <h2 class="tableBeforeTitle">商品模板</h2>

        <div style="height: 4px;background-color: #bbbbbb;width: 100%;margin: 20px 0 2px 0;"></div>
        <div style="height: 1px;width: 100%;background-color: #dddddd;margin-bottom: 10px;"></div>
        <div style="height: 10px;"></div>

        <form class="layui-form" action="">
            <button style="display: none;" lay-submit lay-filter="save" class="layui-btn">保存</button>

            <div class="layui-form-item">
                <div class="layui-inline" style="margin-bottom: 4px;">
                    <div class="label">编号</div>
                    <div style="display: inline-block;width: 160px;">
                        <input type="text" id="no" name="no" class="layui-input readonly" readonly style="font-size: 12px;">
                    </div>
                </div>

                <div class="layui-inline" style="margin-bottom: 4px;">
                    <div class="label">名称</div>
                    <div style="display: inline-block;width: 160px;">
                        <input type="text" id="name" name="name" class="layui-input" style="font-size: 12px;">
                    </div>
                </div>

                <div class="layui-inline" style="margin-bottom: 4px;">
                    <div class="label">状态</div>
                    <div style="display: inline-block; width: 160px;">
                        <input type="checkbox" checked="" name="status" lay-skin="switch" lay-filter="status" lay-text="正常|停用">
                    </div>
                </div>
            </div>


            <table class="layui-hide" id="table" lay-filter="table" lay-size="sm"></table>

            <table class="layui-table" style="margin: -1px 0 0 0;">
                <colgroup>
                    <col width="60">
                    <col>
                </colgroup>
                <tbody>
                    <tr>
                        <td>备注</td>
                        <td>
                            <input type="text" id="remark" name="remark" class="layui-input">
                        </td>
                    </tr>
                </tbody>
            </table>

        </form>
    </div>

    <script type="text/html" id="operBar">
        <a class="layui-btn layui-btn-xs layui-btn-danger table-operator" lay-event="delete">删除</a>
    </script>

    <script type="text/html" id="numberBar" >
        <div class="numberDiv">
            <input type="number" name="number" value="{{ getNumber(d.number) }}" class="layui-input number">
        </div>
    </script>
</div>
</body>
<html:loading/>
</html>